<%--
  Created by IntelliJ IDEA.
  User: dds135246
  Date: 2020/8/12
  Time: 22:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1981897_vuivu7ezc59.css">
    <link rel="stylesheet" href="/static/css/reset.css">
    <style>
        body {
            font: 14px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
            color: #333333;
            background-color: #ffffff;
            min-width: 1226px;
            text-align: unset;
        }

        a {
            text-decoration: none;
            color: red;
        }

        .mi-container {
            width: 1226px;
            margin-right: auto;
            margin-left: auto;
            display: block;
        }

        /*
        尾部站点 mi-site-footer
            服务列表 mi-footer-service
            链接组 mi-footer-links
                链接盒子 col-links
                联系方式盒子 col-contact
        站点信息 mi-site-info
            小米信息 mi-info-text
                小米全家桶 mi-sites
                备案信息 mi-record-info
            认证信息 mi-cert-links
        */

        /*尾部站点 mi-site-footer 开始*/
        .mi-site-footer {
            border-bottom: 1px solid #e0e0e0;
        }

        .mi-site-footer .mi-footer-service {
            padding: 27px 0;
            border-bottom: 1px solid #e0e0e0;
            display: block;
        }

        .mi-site-footer .mi-footer-service > ul {
            display: flex;
            justify-content: center;
        }

        .mi-site-footer .mi-footer-service > ul li {
            /*display: block;*/
            width: 19.8%;
            height: 25px;
            line-height: 25px;
            text-align: center;
            border-left: 1px solid #e0e0e0;
        }

        .mi-site-footer .mi-footer-service > ul li a {
            font-size: 16px;
            color: #616161;
            transition: color 0.2s;
        }

        .mi-site-footer .mi-footer-service > ul li a:hover {
            color: #ff6700;
        }

        .mi-site-footer .mi-footer-service > ul li a .iconfont {
            margin-right: 6px;
            font-size: 24px;
            line-height: 24px;
            vertical-align: middle; /*把图标元素放置在父元素的中部*/
        }

        .mi-site-footer .mi-footer-service > ul li:first-child {
            border-left: none;
        }

        /******************************************************/
        /*链接组 mi-footer-links 开始*/
        .mi-site-footer .mi-footer-links {
            padding: 40px 0px; /*上下腾出40px空间*/
            display: flex;
            justify-content: space-around;
        }

        .mi-site-footer .mi-footer-links .col-links {
            width: 130px;
            /*height: 112px;*/
            display: block;

            font-size: 14px;
            margin-left: 30px; /*底部保留26px空间，左部保留30px空间*/
        }

        .mi-site-footer .mi-footer-links .col-links > dl {
            margin-bottom: 26px;
        }

        .mi-site-footer .mi-footer-links .col-links > dd > a {
            font-size: 12px;
            line-height: 2.5;
            color: #757575;
        }

        .mi-site-footer .mi-footer-links .col-links > dd > a:hover {
            color: #FF6700;
        }

        /*联系方式盒子 col-contact 开始*/
        .mi-site-footer .mi-footer-links .col-contact {
            width: 251px;
            text-align: center;
            /*border-left: 1px solid #e0e0e0;*/
        }

        .mi-site-footer .mi-footer-links .col-contact > p {
            font-size: 12px;
        }

        .mi-site-footer .mi-footer-links .col-contact .phone {
            font-size: 22px;
            line-height: 1;
            color: #FF6700;
        }

        .mi-site-footer .mi-footer-links .col-contact .mi-J_contactBtn em {
            font-size: 12px;
        }

        .mi-site-footer .mi-footer-links .col-contact .mi-J_contactBtn {
            margin: 0 auto; /*块级元素水平居中*/
            width: 118px;
            height: 28px;
            line-height: 28px;
            font-size: 12px;
            border: 1px solid #FF6700;
            color: #FF6700;
            background-color: #ffffff;
            display: block;

            transition: all 0.4s;
        }

        .mi-site-footer .mi-footer-links .col-contact .mi-J_contactBtn:hover {
            color: #ffffff;
            background-color: #FF6700;
        }

        /*关注小米*/
        .mi-site-footer .mi-footer-links .col-contact .follow {
            position: relative;
        }

        .mi-site-footer .mi-footer-links .col-contact .follow > a > img {

            width: 24px;
            height: 24px;
        }

        /*.mi-site-footer .mi-footer-links .col-contact .follow a .wx:hover + .follow #J_followWxImg {*/
        /*    background-color: blue;*/
        /*    display: block;*/
        /*}*/

        .mi-site-footer .mi-footer-links .col-contact .follow #J_followWxImg {
            position: absolute;
            width: 126px;
            height: 126px;
            top: 25px;
            right: 50px;
            z-index: 10;
            display: none;
        }

        /*联系方式盒子 col-contact 结束*/

        /*站点信息 mi-site-info 开始*/
        .mi-site-info .mi-info-text {
            width: 1226px;
            display: block;
        }

        /*站点部分*/
        .mi-site-info .mi-info-text .mi-sites {
            margin: 14px 0px;
        }

        .mi-site-info .mi-info-text .mi-sites > a {
            color: #616161;
        }

        .mi-site-info .mi-info-text .mi-sites > a:hover {
            color: #FF6700;
        }

        .mi-site-info .mi-info-text .mi-sites > span {
            margin: 0 3.5px;
        }

        /*备案信息*/
        .mi-site-info .mi-info-text .mi-record-info a {
            color: #616161;
        }

        .mi-site-info .mi-info-text .mi-record-info a:hover {
            color: #FF6700;
        }

        /*认证信息 mi-cert-links*/
        .mi-site-info .mi-cert-links {
            margin: 0 auto;
        }
    </style>
</head>
<body>

<!--
尾部站点 mi-site-footer
    服务列表 mi-footer-service
    链接组 mi-footer-links
        链接盒子 col-links
        联系方式盒子 col-contact
站点信息 mi-site-info
    小米信息 mi-info-text
        小米全家桶 mi-sites
        备案信息 mi-record-info
    认证信息 mi-cert-links
-->

<footer>
    <!--尾部站点 mi-site-footer 开始-->
    <div class="mi-site-footer mi-container">

        <!--服务列表 mi-footer-service 开始-->
        <div class="mi-footer-service">
            <ul class="mi-list-service">
                <li>
                    <a href="//www.mi.com/service/quick-repair" target="_blank">
                        <em class="iconfont icon-weixiu"></em>预约维修服务
                    </a>
                </li>
                <li>
                    <a href="//www.mi.com/service/exchange#back" target="_blank">
                        <em class="iconfont icon-tian1"></em>7天无理由退货
                    </a>
                </li>
                <li>
                    <a href="//www.mi.com/service/exchange#back" target="_blank">
                        <em class="iconfont icon-tian"></em>15天免费换货
                    </a>
                </li>
                <li>
                    <a href="//www.mi.com/service/buy/Postal%20policy" target="_blank">
                        <em class="iconfont icon-liwu"></em>满99元包邮
                    </a>
                </li>
                <li>
                    <a href="//www.mi.com/static/maintainlocation/" target="_blank">
                        <em class="iconfont icon-didian"></em>520余家售后网点
                    </a>
                </li>
            </ul>
        </div>
        <!--服务列表 mi-footer-service 结束-->
        <!--链接组 mi-footer-links 开始-->
        <div class="mi-footer-links">
            <!--链接盒子 col-links-->
            <div class="col-links">
                <dl>帮助中心</dl>
                <dd><a href="//www.mi.com/service/account/Account%20registration/" target="_blank">账户管理</a></dd>
                <dd><a href="//www.mi.com/service/buy/SalesTime/" target="_blank">购物指南</a></dd>
                <dd><a href="//www.mi.com/service/order/sendprogress/" target="_blank">订单操作</a></dd>
            </div>
            <div class="col-links">
                <dl>服务支持</dl>
                <dd><a href="//www.mi.com/service/exchange" target="_blank">售后政策</a></dd>
                <dd><a href="//www.mi.com/service/" target="_blank">自助服务</a></dd>
                <dd><a href="//www.mi.com/c/service/download/" target="_blank">相关下载</a></dd>
            </div>
            <div class="col-links">
                <dl>线下门店</dl>
                <dd><a href="//www.mi.com/c/xiaomizhijia/" target="_blank">小米之家</a></dd>
                <dd><a href="//www.mi.com/static/maintainlocation/" target="_blank">服务网点</a></dd>
                <dd><a href="//www.mi.com/static/familyLocation/" target="_blank">授权体验店</a></dd>
            </div>
            <div class="col-links">
                <dl>关于小米</dl>
                <dd><a href="//www.mi.com/about/" target="_blank">了解小米</a></dd>
                <dd><a href="//hr.xiaomi.com/" target="_blank">加入小米</a></dd>
                <dd><a href="//company.mi.com/zh-cn/ir/indexContent/index.html" target="_blank">投资者关系</a></dd>
                <dd><a href="//www.mi.com/csr/" target="_blank">企业社会责任</a></dd>
                <dd><a href="//integrity.mi.com/" target="_blank">廉洁举报</a></dd>
            </div>
            <div class="col-links">
                <dl>关注我们</dl>
                <dd><a href="//weibo.com/xiaomishangcheng" target="_blank">新浪微博</a></dd>
                <dd><a href="javascript:void(0);" id="J_siteWeixinCode">官方微信</a></dd>
                <dd><a href="//www.mi.com/about/contact/" target="_blank">联系我们</a></dd>
                <dd><a href="//www.mi.com/foundation/index" target="_blank">公益基金会</a></dd>
            </div>
            <div class="col-links">
                <dl>特色服务</dl>
                <dd><a href="//www.mi.com/order/fcode" target="_blank">F码通道</a></dd>
                <dd><a href="//www.mi.com/order/giftcode" target="_blank">礼物码</a></dd>
                <dd><a href="//www.mi.com/service/imei" target="_blank">防伪查询</a></dd>
            </div>

            <!--联系方式盒子 col-contact 开始-->
            <div class="col-contact">
                <p class="phone">400-100-5678</p>
                <p>8:00-18:00（仅收市话费）</p>
                <a class="mi-J_contactBtn">
                    <em class="iconfont icon-message"></em>人工客服
                </a>
                <div class="follow">关注小米：
                    <a href="https://weibo.com/xiaomishangcheng" target="_blank">
                        <img class="wb" src="https://cdn.cnbj1.fds.api.mi-img.com/staticsfile/global/wb.png" alt="">
                    </a>
                    <a href=" " id="J_followWx">
                        <img class="wb" src="https://cdn.cnbj1.fds.api.mi-img.com/staticsfile/global/wx.png" alt="">
                    </a>
                    <img src="https://cnbj1.fds.api.xiaomi.com/staticsfile/global/wx-img.png" id="J_followWxImg">
                </div>
            </div>
            <!--联系方式盒子 col-contact 结束-->
        </div>
        <!--链接组 mi-footer-links 结束-->
    </div>
    <!--尾部站点 mi-site-footer 结束-->

    <!--站点信息 mi-site-info 开始-->
    <div class="mi-site-info mi-container">
        <!--小米信息 mi-info-text 开始-->
        <div class="mi-info-text">
            <!--小米全家桶 mi-sites 开始-->
            <p class="mi-sites">
                <a href="../../homepage/code/homepage.html" target="_blank">小米商城</a>
                <span class="sep">|</span>
                <a href="//www.miui.com/" target="_blank">MIUI</a>
                <span class="sep">|</span>
                <a href="//home.mi.com/index.html" target="_blank">米家</a>
                <span class="sep">|</span>
                <a href="http://www.miliao.com/" target="_blank">米聊</a>
                <span class="sep">|</span>
                <a href="//www.duokan.com/" target="_blank">多看</a>
                <span class="sep">|</span>
                <a href="//game.xiaomi.com/" target="_blank">游戏</a>
                <span class="sep">|</span>
                <a href="//b.mi.com/?client_id=180100031058&amp;masid=17409.0358">政企服务</a>
                <span class="sep">|</span>
                <a href="//xiaomi.tmall.com/" target="_blank">小米天猫店</a>
                <span class="sep">|</span>
                <a href="//privacy.mi.com/all/zh_CN/" target="_blank">小米集团隐私政策</a>
                <span class="sep">|</span>
                <a href="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/f516fe9e2c01.html" target="_blank">小米公司儿童信息保护规则</a>
                <span class="sep">|</span>
                <a href="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/ded8d0e4a77d.html" target="_blank">小米商城隐私政策</a>
                <span class="sep">|</span>
                <a href="//www.mi.com/about/user-agreement/" target="_blank">小米商城用户协议</a>
                <span class="sep">|</span>
                <a href="//static.mi.com/feedback/" target="_blank">问题反馈</a>
                <span class="sep">|</span>
                <a href="javascript:void(0);" class="J_siteGlobalRegion">Select Location</a>
            </p>
            <!--小米全家桶 mi-sites 结束-->
            <!--备案信息 mi-record-info 开始-->
            <p class="mi-record-info">
                ©
                <a href="javascript:" target="_blank" title="mi.com">mi.com</a>
                京ICP证110507号
                <a href="http://beian.miit.gov.cn/" target="_blank">京ICP备10046444号</a>
                <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802020134"
                   target="_blank">京公网安备11010802020134号</a>
                <a href="//www.mi.com/culture-license/" target="_blank">京网文[2020]0276-042号</a>
                <br> <a href="//www.mi.com/medical/record/" target="_blank">（京）网械平台备字（2018）第00005号</a>
                <a href="//www.mi.com/medical/qualification/" target="_blank">互联网药品信息服务资格证
                    (京)-非经营性-2014-0090</a> <a href="//www.mi.com/business-license/" target="_blank"
            >营业执照</a>
                <a href="//www.mi.com/medical/list/" target="_blank">医疗器械质量公告</a>
                <br> <a href="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e0c7d4cf3b7cd88de10196e30c92e020.png"
                        target="_blank">增值电信业务许可证</a>&nbsp;网络食品经营备案（京）【2018】WLSPJYBAHF-12&nbsp;
                <a href="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/fe7383e11127caea371f17156f429a1e.png"
                   target="_blank">食品经营许可证</a>
                <br>
                违法和不良信息举报电话：171-5104-4404&nbsp;
                <a href="https://www.mi.com/intellectual" target="_blank">知识产权侵权投诉</a>
                &nbsp;本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
            </p>
            <!--备案信息 mi-record-info 结束-->
        </div>
        <!--小米信息 mi-info-text 结束-->

        <!--认证信息 mi-cert-links 开始-->
        <div class="mi-cert-links">
            <a href="//privacy.truste.com/privacy-seal/validation?rid=4fc28a8c-6822-4980-9c4b-9fdc69b94eb8&amp;lang=zh-cn"
               target="_blank">
                <img src="//i1.mifile.cn/f/i/17/site/truste.png" alt="TRUSTe Privacy Certification">
            </a>
            <a href="//search.szfw.org/cert/l/CX20120926001783002010" target="_blank">
                <img src="//s01.mifile.cn/i/v-logo-2.png" alt="诚信网站">
            </a>
            <a href="//ss.knet.cn/verifyseal.dll?sn=e12033011010015771301369&amp;ct=df&amp;pa=461082"
               target="_blank">
                <img src="//s01.mifile.cn/i/v-logo-1.png" alt="可信网站">
            </a>
            <a href="//www.mi.com/service/buy/commitment/" target="_blank">
                <img src="//i8.mifile.cn/b2c-mimall-media/ba10428a4f9495ac310fd0b5e0cf8370.png" alt="诚信经营 放心消费">
            </a>
        </div>
        <!--认证信息 mi-cert-links 结束-->
    </div>
    <!--站点信息 mi-site-info 结束-->
</footer>

<!--引入静态库的jquery框架-->
<script src="/static/js/jquery.min.js"></script>
<script>
    //使用JS脚本控制微信二维码的显示和隐藏
    //由于CSS:hover无法控制父元素，因此使用JS+jQuery来控制
    let wxQRCode = $(".col-contact .follow #J_followWxImg");
    $(".col-contact .follow #J_followWx").mouseenter(function (event) {
        wxQRCode.css({
            "display": "inline",
            "z-index": "500"
        });
    })

    $(".col-contact .follow #J_followWx").mouseleave(function (event) {
        wxQRCode.css("display", "none");
    })
</script>

</body>
</html>
